<template>
    <!--
使用说明：
1）、引入category-cascader.vue
2）、语法：<category-cascader :CascaderPathVals.sync="CascaderPathVals"></category-cascader>
    解释：
      CascaderPathVals：指定的值是cascader初始化需要显示的值，应该和父组件的CascaderPathVals绑定;
          由于有sync修饰符，所以cascader路径变化以后自动会修改父的CascaderPathVals，这是结合子组件this.$emit("update:CascaderPathVals",v);做的
      -->
    <div>
        <el-cascader
            filterable
            :clearable="clearable"
            :show-all-levels="false"
            :placeholder="placeholder"
            v-model="deptValue"
            :options="datas"
            :props="defaultProps"
            :style="styles"
        ></el-cascader>
    </div>
</template>

<script>

export default {
    components: {},
    //接受父组件传来的值
    props: {
        styles: {
            type: String,
            default: 'width: 100%'
        },
        placeholder: {
            type: String,
            default: '试试搜索：采购部'
        },
        clearable:{
            type: Boolean,
            default: true
        },
        checkStrictly: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        //这里存放数据
        return {
            defaultProps: {
                checkStrictly: this.checkStrictly,
                value: "id",
                label: "name",
                children: "children"
            },

            datas: [],
            deptValue: []
        };
    },
    watch: {
        deptValue(val) {
            // 更新父组件的值
            if(val.length > 0) {
                this.$emit("update:cascaderDeptVal", val[val.length - 1]);
            }
            // 调用父组件@clear，清空，赋值为NULL
            if(val.length == 0) {
                this.$emit("clear");
            }
        },
    },

    created() {
        this.getListWithTree();
    },

    methods: {
        async getListWithTree() {
            const res = await this.$http({
                url: '/hr/dept/listWithTree',
                method: 'GET'
            })
            if (this.ResultMessage(res, false)) {
                this.datas = res.data
            }
        },

        // 重置按钮调用清空
        clearVal() {
            this.deptValue = []
        }
    },

};
</script>
<style scoped></style>
